<template>
  <div>
     <div class="amap-page-container">
    <div class="toolbar">
      当前坐标: {{ lng }}, {{ lat }}
    </div>
    <el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      :events="events"
      pitch-enable="false"
    >
      <el-amap-marker v-for="(marker,index) in markers" :key="index" :events="marker.events" :position="marker.position" />
      <el-amap-info-window
        v-if="window"
        :position="window.position"
        :visible="window.visible"
        :content="window.content"
        :offset="window.offset"
        :close-when-click-map="true"
        :is-custom="true"
      >
        <el-card class="box-card" style="width:200px">
          <el-row>
            <el-col :span="24"><span>地址：{{ window.address }}</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span>电话：{{window.tel}}</span></el-col>
          </el-row>

            <el-image
              style="width: 150px; height: 100px"
              :src="window.img"
              fit="fill"></el-image>
          <el-button type="success" @click="checkDetail">查看详情</el-button>
        </el-card>
      </el-amap-info-window>
    </el-amap>
  </div>
  </div>
</template>

<style>
  .amap-page-container {
    height: 500px;
  }
</style>


<script>
export default {
  name:"amap",
  data: function() {
    const self = this
    return {
      data: [{
        position: '106.527071,29.584762',
        address: `重庆市红旗河沟`,
        tel:"17726698555",
        img:"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=140382183,3286063325&fm=26&gp=0.jpg"

      },
      {
        position: '106.527075,29.588764',
        address: '重庆市两江',
        tel:"17726698555",
        img:"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1026953950,3272045536&fm=26&gp=0.jpg"
      }],
      zoom: 12,
      center: [106.53883, 29.579958 ],
      expandZoomRange: true,
      markers: [],
      windows: [],
      window: '',
      events: {
        click(e) {
          const { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
        }
      },
      lng: 0,
      lat: 0
    }
  },
  mounted() {
    this.point()
  },
  methods: {
    point() {
      const markers = []
      const windows = []
      const that = this
      this.data.forEach((item, index) => {
        markers.push({
          position: item.position.split(','),
          // icon:item.url, //不设置默认蓝色水滴
          events: {
            mouseover() {
              // 方法：鼠标移动到点标记上，显示相应窗体
              that.windows.forEach(window => {
                window.visible = false // 关闭窗体
              })
              that.window = that.windows[index]
              that.$nextTick(() => {
                that.window.visible = true
              })
            }
          }
        })
        


        windows.push({
          position: item.position.split(','),
          isCustom: true,
          offset: [115, 55], // 窗体偏移
          showShadow: false,
          visible: false, // 初始是否显示
          address: item.address,
          tel:item.tel,
          img:item.img
        })
      })
      //  加点
      this.markers = markers
      // 加弹窗
      this.windows = windows
    },
    checkDetail() {
      
      this.$router.push({path:"/userapp/cardetail"})
    }
  }
}
</script>